<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新增APP版本</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>APP的历史版本</legend>
    </fieldset>
<!--    展示历史版本列表-->
    <table class="layui-table">
        <thead>
        <tr>
            <th>软件名称</th>
            <th>版本号</th>
            <th>软件大小</th>
            <th>发布状态</th>
            <th>APK文件下载</th>
            <th>最新更新时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="version : ${appVersionList}">
            <td th:text="${version.appName}"></td>
            <td th:text="${version.versionNo}"></td>
            <td th:text="${version.versionSize}"></td>
            <td th:text="${version.publishStatusName}"></td>
            <td ><a th:href="${version.downloadLink}" th:text="${version.apkFileName}"></a></td>
            <td th:text="${#dates.format(version.updated,'yyyy-MM-dd')}"></td>
        </tr>

        </tbody>
    </table>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>新增APP版本</legend>
    </fieldset>

    <form class="layui-form" action="">

<!--        APK的访问路径-->
        <input hidden id="downloadLink" name="downloadLink"  th:value="${appVersionList.get(0).downloadLink}">
        <input hidden id="appId" name="appId" th:value="${appId}" >
<!--        当前appId-->

<!--        第一行-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">版本号</label>
                <div class="layui-input-inline">
                    <input type="text" th:value="${appVersionList.get(0).versionNo}" name="versionNo"  lay-verify="required" lay-reqtext="版本号是必填项，岂能为空？" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">版本大小</label>
                <div class="layui-input-inline">
                    <input type="text" th:value="${appVersionList.get(0).versionSize}" name="versionSize" lay-verify="required" lay-reqtext="版本大小是必填项，岂能为空？" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">发布状态</label>
                <div class="layui-input-inline">
                    <select name="publishStatus" readonly="" lay-verify="required" lay-search="">
                        <option value="3">预发布</option>
<!--                        <option th:each="p : ${publishStatusList}" th:value="${p.valueId}" th:text="${p.valueName}">layer</option>-->

                    </select>
                </div>
            </div>
        </div>

<!--        第二行 文件上传-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">APK文件</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="upAPK"><i class="layui-icon"></i>上传APK文件</button>
                    <p id="uploadInfo"></p>
                </div>
            </div>

        </div>

<!--        第三行 富文本编辑器-->
        <div class="layui-form-item">
            <label class="layui-form-label">版本介绍</label>
            <div class="layui-input-block" style="width: 840px">
                <textarea id="versionInfo" th:text="${appVersionList.get(0).versionInfo}" lay-verify="versionInfo" name="versionInfo" style="display: none;"></textarea>
            </div>

        </div>

<!--        第四行 按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="go">立即修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>



    </form>

</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/echarts.js}"></script>
<script th:inline="none">



    //JavaScript代码区域
    layui.use(['element','table','upload','layedit','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var upload = layui.upload;
        var $ = layui.$;
        var layedit = layui.layedit;
        var form = layui.form;





        upload.render({ //允许上传的文件后缀
            elem: '#upAPK'
            ,url: baseUrl+'upload/apk'
            ,accept: 'file' //普通文件
            ,exts: 'apk' //文件后缀
            ,done: function(res, index, upload){
                //假设code=0代表上传成功
                if(res.code == 0){
                    $("#downloadLink").val(res.data.src)
                    $("#uploadInfo").html("上传文件成功").css("color","green")
                    //do something （比如将res返回的图片链接保存到表单的隐藏域）
                }else {
                    $("#uploadInfo").html(res.msg).css("color","red")
                }

            }
            ,error: function(index, upload){
                //上传失败
                layer.msg("服务器原地爆炸,请联系管理员!!!");
            }
        });


        var versionInfo = layedit.build('versionInfo', {
            height: 120 //设置编辑器高度
        });//建立编辑器


        form.verify({
            versionInfo: function (value, item){ //value：表单的值、item：表单的DOM对象
                // 将富文本编辑器的内容同步到textarea.   在提交表单时能拿到改该数据
                layedit.sync(versionInfo);
                var content = layedit.getContent(versionInfo);
                if (content==null || content == ''){
                    return "APP简介不能为空！！";
                }
            }
        });


        // 监听submit的单击事件
        form.on('submit(go)', function(data){
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var app = data.field;

            //发送ajax请求  编辑APP版本信息
            $.ajax({
                url:baseUrl+"dev/app/editAppVersion",
                data:app,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                        layui.sessionData('VersionTale', {
                            key: 'versionNo'
                            ,value: result.data
                        });

                        layer.open({
                            title: '编辑APP版本信息'
                            ,content: '恭喜你! 编辑APP版本信息成功！'
                            ,end:function () {
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }
                        });
                    }else {
                        layer.open({
                            title: '编辑APP版本信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });




    });




</script>
</body>
</html>